
<template>
    <div  class="totalStyle enter_detail">
        <div class="tablestyle">
            <div class="titleStyle">
                <p class="leftTitle dis_center">
                    <el-icon  class="callback" :size = '20' @click="callback"><Back /></el-icon>
                    <span class="callback ml-16" @click="callback">返回</span>
                    <span class="split"></span>
                    <span class="font_w">查看</span>
                    </p>
            </div>
            <div class="bottomBox bg_color">
                <div class="test_paper">
                 <div class="basicstyle">
                    <div class="itemStyle">
                        <el-tabs v-model="dialogData.activeName" class="demo-tabs" @tab-click="handleClick">
                            <el-tab-pane label="职业健康" name="a">
                                <div class="formItem">
                                    <div class="flex">
                                        <div class="imgStyle" v-if="!dialogData.formData.photoUrl">
                                            
                                        </div>
                                        <el-image v-if="dialogData.formData.photoUrl"
                                                style="width: 168px; height: 168px"
                                                :src='dialogData.formData.photoUrl'
                                                :preview-src-list="[dialogData.formData.photoUrl]"
                                                :zoom-rate="1.2"
                                                :max-scale="7"
                                                :min-scale="0.2"
                                                :initial-index="4"
                                                fit="cover"
                                                />
                                        <div class="deviceBox ml-16 w100">
                                            <p class="deviceName mt-8">{{dialogData.formData.realName}}({{dialogData.formData.deptName}})</p>
                                            <div class="flex w100">
                                                <p class="flex mt-8 w50"> <span class="deviceLabel">手机号：</span><span class="deviceContent">{{dialogData.formData.phone}}</span></p>
                                                <p class="flex mt-8 w50"> <span class="deviceLabel">身份证号：</span><span class="deviceContent">{{dialogData.formData.idCard}}</span></p>
                                            </div>
                                            <div class="flex w100">
                                                <p class="flex mt-8 w50"> <span class="deviceLabel">网络员：</span><span class="deviceContent">{{dialogData.formData.webmaster}}</span></p>
                                                <p class="flex mt-8 w50"> <span class="deviceLabel">户籍：</span><span class="deviceContent">{{dialogData.formData.censusRegister}}</span></p>
                                            </div>
                                            <div class="flex w100">
                                                <p class="flex mt-8 w50"> <span class="deviceLabel">职位：</span><span class="deviceContent">{{dialogData.formData.position}}</span></p>
                                                <p class="flex mt-8 w50"> <span class="deviceLabel">区内住址：</span><span class="deviceContent">{{dialogData.formData.areaAddress}}</span></p>
                                            </div>
                                            <p class="flex mt-8"><span class="deviceLabel">宿舍住址：</span><span class="deviceContent">{{dialogData.formData.dormAddress}}</span></p>
                                            <!-- <p class="flex mt-8"><span class="deviceLabel">网络员：</span><span class="deviceContent">{{dialogData.formData.webmaster}}</span></p> -->
                                        </div>
                                    </div>
                                    <p class="titleName mt-16">培训信息</p>
                                    <div class="textBg">
                                        <p class="textStyle01">应参加培训{{dialogData.formData.cultivateSum}}次<span class="splitStyle">|</span><el-tag class="ml-2" type="success">已参加</el-tag>{{dialogData.formData.cultivateNum}}次<span  class="splitStyle">|</span><el-tag class="ml-2" type="danger">未参加</el-tag>{{dialogData.formData.noCultivateNum}}次</p>
                                    </div>
                                    <p class="titleName mt-16">考试信息</p>
                                    <div class="textBg">
                                        <p class="textStyle01">应参加考试{{dialogData.formData.examSum}}次<span class="splitStyle">|</span><el-tag class="ml-2" type="success">优秀</el-tag>{{dialogData.formData.excellentNum}}次<span  class="splitStyle">|</span><el-tag class="ml-2" type="">及格</el-tag>{{dialogData.formData.passNum}}次<span  class="splitStyle">|</span><el-tag class="ml-2" type="danger">不及格</el-tag>{{dialogData.formData.noPassNum}}次</p>
                                    </div>
                                    <p class="titleName mt-16">人员证书</p>
                                    <div>
                                        <el-table
                                                :data="dialogData.formData.userCertificates"
                                                :header-cell-style="{ background: 'rgba(242,245,250,1)'}"     
                                                border
                                                style="width: 100%"
                                            > 
                                                <el-table-column prop="name"   label="证书名称" min-width="10%" />
                                                <el-table-column prop="code"   label="证书编号" min-width="10%" />
                                                <el-table-column prop="remark"   label="有效期限" min-width="10%" />
                                                <!-- <el-table-column prop="fileSize"   label="文档大小" min-width="10%" /> -->
                                                <el-table-column prop="url"   label="证书照片" min-width="10%" >
                                                    <template #default="scope">
                                                        <el-image
                                                            v-if="scope.row.url"
                                                            style="width: 30px; height: 30px;margin-right:16px;"
                                                            :src='scope.row.url'
                                                            :preview-src-list="[scope.row.url]"
                                                            :zoom-rate="1.2"
                                                            :initial-index="4"
                                                            fit="cover"
                                                            preview-teleported="true"
                                                        />
                                                        </template>
                                                </el-table-column>
                                                <el-table-column prop="specialworkStr"   label="对应特殊作业" min-width="10%" />
                                            </el-table>
                                    </div>
                                    <p class="titleName mt-16">体检信息</p>
                                    <div>
                                        <el-table
                                                :data="dialogData.formData.userChecks"
                                                :header-cell-style="{ background: 'rgba(242,245,250,1)'}"     
                                                border
                                                style="width: 100%"
                                            > 
                                                <el-table-column prop="name"   label="文件名" min-width="10%" >
                                                    <template #default="scope">
                                                        <span class="fileName" @click="handleLook(scope.row)">{{scope.row.name}}</span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="time"   label="上传时间" min-width="10%" />
                                                <!-- <el-table-column prop="fileSize"   label="文档大小" min-width="10%" /> -->
                                                <el-table-column prop="fileTypeStr"   label="文档格式" min-width="10%" />
                                                <el-table-column label="操作列" width="100" min-width="20%">
                                                    <template #default="scope">
                                                        <span class="buttonFun cursor" @click="download(scope.row)">下载</span>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                    </div>
                                    <p class="titleName mt-16">添加信息</p>
                                    <div class="flex  ml-21">
                                            <p class="formItemStyle"><span class="labelStyle">添加人：</span><span class="contentStyle">{{dialogData.formData.createUser}}</span></p>
                                            <p class="formItemStyle"><span class="labelStyle">添加时间：</span><span class="contentStyle">{{dialogData.formData.createTime}}</span></p>
                                    </div>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="培训信息" name="b">
                                <Pxxx :userId = 'dialogData.formData.userId'/>
                            </el-tab-pane>
                            <el-tab-pane label="考试信息" name="c">
                                <Ksxx :userId = 'dialogData.formData.userId'/>
                            </el-tab-pane>
                            <el-tab-pane label="特殊作业信息" name="d">
                                <Tszy :userId = 'dialogData.formData.userId'/>
                            </el-tab-pane>
                        </el-tabs>
                   </div>
                 </div>    
                </div>
            </div>
            <previewBox :previewDialog="dialogData.previewDialog" :file="dialogData.formData.file"
                @closePreview="closePreview()">
            </previewBox>
        </div>
    </div>
</template>
<script  setup>
import previewBox from '../../preview/preview.vue'
import  Pxxx from './pxxx.vue'
import  Ksxx from './ksxx.vue'
import  Tszy from './tszy.vue'
import { defineProps, ref,defineEmits,onBeforeMount,shallowRef } from "vue";
import { reactive, watch,onUpdated ,onBeforeUnmount,onMounted} from "vue";
import {getOccupationalInfo as getOccupationalInfo } from "@/api/train.js"

import { ElMessage, ElMessageBox,ElNotification } from "element-plus";
import { useRouter } from 'vue-router';
import { getymdhms } from '@/utils/auth'
const router = useRouter();
const user = JSON.parse(localStorage.getItem('userData')) 
let props = defineProps({
  tableId:{
      type: String,
  }
}); 

const cascaderprops = {
  multiple: true,
}
const emit = defineEmits(['callback'])
const dialogData = reactive({
        activeName:'a',
        printData:{
            showPrint:false,
            printInfo:''
        },
        activities:[
        ],
        formData:{
            
        },
        previewDialog: false
})
//查看详情
const getOccupationalInfoFun =()=>{
        getOccupationalInfo(props.tableId).then((res) => {
        if(res.code ===200){
            dialogData.formData = res.body;
        }else{
            ElNotification({
                title: '提示',
                message: res.message?res.message:'服务器异常',
                type: 'warning',
            })
            if(res.code === 100007 ||  res.code === 100008 ||  res.code === 100011){
                    store.dispatch('app/logout')
                }
        }
    })
}
onBeforeMount(()=>{
    getOccupationalInfoFun()

})
// 打印预览
const printLook = () => {
    // dialogData.printData.printInfo = dialogData.formData.previewQrCode
    dialogData.printData.printInfo= 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
    dialogData.printData.showPrint = true;
    console.log(dialogData.printData.showPrint)
}
//预览
const handleLook = (row) => {
  dialogData.previewDialog = true
  dialogData.formData.file = row
}
const closePreview =() => {
  dialogData.previewDialog = false
}

//下载
const download = (row)=>{
    window.open(row.url);
}
//返回上一级
const callback = () => {
    emit('callback') 
}
</script>
<style lang = 'less' scoped>
.enter_detail{
    .bg_color{
        background-color: #EDF0F5;
    }
    .bottomBox{
        overflow-y: auto;
    }
    .basicInfo{
        width: 470px;
        background-color: #F2F5FA;
        height: 330px;
    }
    .test_paper{
        width: 1070px;
        margin: 0 auto;
        .formStyle{
            width: 100%;
            background-color: #F2F5FA;
            padding: 16px;
        }
    }
    .totalStyle{
        height: 100%;
    }
    .department{
        background-color: #F2F5FA;
        padding-top: 16px;
        margin-bottom: 16px;
    }
    .addpart{
        margin-left: 160px;
    }
    .callback{
        cursor: pointer;
    }
    .itemStyle{
        background-color: #ffffff;
        .headerMsg{
            height: 56px;
            line-height: 56px;
            color: #1C222C;
            font-size: 16px;
            border-bottom: 1px solid #DADFE6;
            padding: 0 16px;
            width: 100%;
            font-weight: 600;
        }
        .formItem{
            padding: 16px 56px 16px;
            .titleName{
                color: #4B515B;
                font-size: 14px;
                padding-left: 8px;
                border-left: 5px solid #2E83FC;
                margin-bottom: 16px;
                font-weight: 600;
            }
            // .imgStyle{
            //     width: 112px;
            //     height: 112px;
            //     background-color: #2e83fc;
            // }
            .deviceName{
                color: #000000;
                font-size: 20px;
            }
            .deviceLabel{
                width: 120px;
                color: #797F89;
                font-size: 14px;
            }
            .deviceContent{
                color: #1C222C;
                font-size: 14px;
            }

        }
        .tishi{
            margin-bottom: 16px;
            color: #F46B5A;
            font-size: 12px;
        }
    }
    .workCard{
        :deep(.el-select){
            width: 90%;
        }
    }

    .footerStyle{
        line-height: 76px;
        display: flex;
        line-height: 76px;
        align-items: center;
        justify-content: center;
        height: 76px;
    }
    .split{
        width: 1px !important;
        height: 20px !important;
        background-color: #DADFE6;
        margin: 0 16px;
    }
    .formItemStyle{
            color: #1C222C;
            font-size: 14px;
            width: 50%;
            display: flex;
    }
    
    .color_box{
        background-color: #F2F5FA;
    }
    .ml-160{
        margin-left: 160px;
    }
    .labelStyle{
        display: inline-block;
        color: #797F89;
        font-size: 14px;
        margin-right: 8px;
        width: 130px;
        text-align: left;
        // margin-bottom: 16px;
    }
    .contentStyle{
        display: inline-block;
        width: calc(100% - 140px);
    }
    .tagwidth{
          width: 50px;
        }
        .contentwidth{
          width:calc(100% - 66px)
        }
        .typeName{
          color: #000000;
          font-weight: 700;
          font-size: 20px;
          margin-left: 16px;
        }
        .labelStyle{
          color: #797F89;
          display: inline-block;
          font-size: 14px;
          width: 130px;
          text-align: left;
          line-height: 22px;
        }
        .contentStyle{
          color: #1C222C;
          display: inline-block;
          width: calc(100% - 140px);
          font-size: 14px;
        }
.imgStyle{
    width: 168px;
    height: 168px;
    background-color: #2e83fc;
    background-image: url('@/assets/image/deviceBgm/device.png');
    background-size: cover;

}
.deviceName{
    color: #000000;
    font-size: 20px;
}
.fileName{
    color: #2E83FC;
    cursor: pointer;
}
.deviceLabel{
    width: 120px;
    color: #797F89;
    font-size: 14px;
}
.deviceContent{
    color: #1C222C;
    font-size: 14px;
}
:deep(.el-tabs__header){
            height: 56px;
            line-height: 56px;
            color: #1C222C;
            font-size: 16px;
            // border-bottom: 1px solid #DADFE6;
            padding: 0 16px;
            width: 100%;
}
:deep(.el-tabs__item){
        color: #1C222C;
    font-size: 16px;
    font-weight: 600;
}
:deep(.el-tabs__item.is-active){
     color: #409eff;
}
.infoList{
    width: 100%;
    border-radius: 4px;
    .infoList_item{
        width: 100%;
        
    }
}
.illustrate{
    border: 1px solid #dadfe6;
    border-radius: 4px;
}
.fontsize2{
    color: #797F89;
    font-size: 14px;
}
.splitStyle{
    color: #DADFE6;
    margin: 0 16px;
}
.textStyle01{
    color: #797F89;
    padding: 8px 16px;
    font-size: 14px;
}
}


</style>